<template>
  <view class="container">
    <view class="level-selector">
      <text>选择关卡：</text>
      <picker mode="selector" :range="levels" :value="level-1" @change="onLevelChange">
        <view class="picker">{{ level }}</view>
      </picker>
    </view>
    <view class="score-display">
      <text>当前得分：{{ score }}</text>
    </view>
    <view class="grid">
      <view v-for="block in blocks" :key="block.id" class="block" :style="{ backgroundColor: block.color }" @tap="blockTap(block.id)"></view>
    </view>
	<button @tap="startGame">开始游戏</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      blocks: Array.from({ length: 16 }, (_, i) => ({ id: i, color: '#cccccc' })),
      activeBlocks: [],
      userChoices: [],
      level: 1,
      levels: Array.from({ length: 20 }, (_, i) => i + 1),
      numBlocksToShow: 3,
      score: 0,
      startTime: 0,
    };
  },
  mounted() {
     
    },
  methods: {
	  startGame(){
		   this.initGame(); // 确保在组件加载完成后初始化游戏
	  },
     initGame() {
          this.activeBlocks = [];
          this.userChoices = [];
          this.showRandomBlocks(); // 显示随机色块
          this.startTime = new Date().getTime();
        },
    
        showRandomBlocks() {
          let blocksToShow = this.getBlocksToShow();
          this.blocks.forEach((block, index) => {
            block.color = blocksToShow.includes(index) ? this.getRandomColor() : '#cccccc';
          });
          this.activeBlocks = blocksToShow;
    
          // 设置2秒后将彩色块隐藏
          setTimeout(() => {
            this.blocks.forEach((block, index) => {
              if (blocksToShow.includes(index)) {
                block.color = '#cccccc';
              }
            });
          }, 2000); // 延迟2秒
        },

    blockTap(id) {
      if (!this.userChoices.includes(id)) {
        this.userChoices.push(id);
        this.blocks[id].color = 'blue';
        if (this.userChoices.length === this.numBlocksToShow) {
          this.verifyChoices();
        }
      }
    },
    verifyChoices() {
      let isSuccess = this.userChoices.sort().toString() === this.activeBlocks.sort().toString();
      let timeTaken = new Date().getTime() - this.startTime;
      let timeBonus = Math.max(0, 100 - (timeTaken / 1000));

      this.blocks.forEach((block, index) => {
        block.color = this.activeBlocks.includes(index) ? (isSuccess ? 'green' : this.getRandomColor()) : '#cccccc';
      });

      if (isSuccess) {
       
        setTimeout(() => {
			this.score += timeBonus;
			uni.showToast({
			  title: `成功！得分：${timeBonus.toFixed(1)}，总分：${this.score.toFixed(1)}`,
			  icon: 'success',
			  duration: 3000
			});
			
          this.level++;
          this.numBlocksToShow = Math.min(this.level + 2, this.blocks.length);
          this.userChoices = [];
          this.initGame();
        }, 3000);
      } else {
        uni.showToast({
          title: '失败！请重试本关',
          icon: 'none',
          duration: 2000
        });

        setTimeout(() => {
          this.initGame();
        }, 3000);
      }
    },
    getBlocksToShow() {
      let blocksToShow = [];
      while (blocksToShow.length < this.numBlocksToShow) {
        let r = Math.floor(Math.random() * this.blocks.length);
        if (!blocksToShow.includes(r)) {
          blocksToShow.push(r);
        }
      }
      return blocksToShow;
    },
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#4dbbb8';
      // for (let i = 0; i < 6; i++) {
      //   color += letters[Math.floor(Math.random() * 16)];
      // }
      return color;
    },
    onLevelChange(event) {
      const selectedLevel = parseInt(event.target.value) + 1;
      this.level = selectedLevel;
      this.numBlocksToShow = Math.min(selectedLevel + 2, this.blocks.length);
      this.score = 0;
      this.initGame();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}
.level-selector, .score-display {
  margin: 10px;
}
.picker {
  border: 1px solid #ddd;
  padding: 5px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-gap: 10px;
  /* background-color: #cccccc; */
  padding: 10px;
}
.block {
  width: 50px;
  height: 50px;
  transition: background-color 0.5s;
}
</style>
